<!--  -->
<template>
  <div class="outter">
    <div class="showDataBox">
      <div class="leftBox">
        <div class="item" v-for="item,index in 10" :key="index">
            {{item}}
        </div>
      </div>
      <div class="rightBox"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.outter {
  padding: 20px;
}
.showDataBox {
  width: 100%;
  height: 200px;
  .leftBox {
    width: 60%;
    height: 100%;
    display: flex;
    .item {
      width: 250px;
      height: 50px;
      border-radius: 20px;
      border: 2px solid rgba(245, 239, 252, 1);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 32px 32px 32px 32px;
    }
  }
}
</style>
